<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { Message } from '@arco-design/web-vue';

  const emits = defineEmits(['cancel', 'delete', 'edit']);

  const props = withDefaults(
    defineProps<{
      raw?: any;
      data?: any;
      visible?: boolean;
      title?: string;
      deleteText?: string;
      deleteDesc?: string;
      deleteApi?: (params: any) => Promise<any>;
    }>(),
    {
      visible: false,
      title: '查看',
      deleteText: '确定删除？',
    }
  );

  const handleDrawerEdit = () => {
    emits('edit', props.raw);
    emits('cancel');
  };
  const handleDrawerDelete = () => {
    // console.log('delete', props.deleteApi);
    if (props.deleteApi) {
      if (props.raw && props.raw.id) {
        props
          .deleteApi(props.raw.id)
          .then((res) => {
            Message.success('删除成功');
            emits('delete');
            emits('cancel');
          })
          .catch((err) => {
            console.error(err);
          });
      }
    }
  };
</script>

<template>
  <div class="m-details-drawer">
    <a-drawer
      :width="400"
      :visible="props.visible"
      unmount-on-close
      @cancel="emits('cancel')"
    >
      <template #title>{{ props.title }}</template>
      <div>
        <a-form
          v-if="data"
          class="m-details-drawer-form"
          :model="data"
          layout="vertical"
        >
          <a-form-item
            v-for="(item, index) of data"
            :key="'ddi-' + index"
            :field="item.key"
          >
            <template #label>
              <span>{{ item.label }}</span>
            </template>
            <a-input v-model="item.value" disabled readonly />
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-popconfirm
          type="warning"
          style="width: 240px"
          @ok="handleDrawerDelete"
        >
          <template #icon><span></span></template>
          <template #content>
            <div>
              <div
                style="font-weight: 600; text-align: center"
                class="flex-center"
              >
                <icon-info-circle
                  size="20"
                  style="color: rgb(var(--warning-6)); margin-right: 4px"
                />
                <span>{{ props.deleteText }}</span>
              </div>
              <div style="margin-top: 8px; font-size: 12px; color: #86909c">{{
                props.deleteDesc
              }}</div>
            </div>
          </template>

          <ae-button purpose="delete">删除</ae-button>
        </a-popconfirm>

        <ae-button purpose="edit" @click="handleDrawerEdit">编辑</ae-button>
      </template>
    </a-drawer>
  </div>
</template>

<style lang="less">
  .m-details-drawer {
  }
  .m-details-drawer-form .arco-input-wrapper .arco-input[disabled] {
    -webkit-text-fill-color: var(--color-text-1) !important;
    cursor: default;
  }
</style>
